<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    // const token = window.localStorage.getItem("token");

    return {}
  }
})
</script>

<template>
  <div class="login">
    <!-- 登录注册界面 -->
    <div class="logo"><img src="../../src/assets/img01/mihayou.png" alt="" /></div>
    <div class="login_box">
      <!-- 取消按钮 -->
      <div class="cancel">
        <img src="../../src/assets/img01/quxiao.png" alt="" />
      </div>
      <van-tabs>
        <van-tab title="验证码登录">
          <!-- 验证码登录 -->
          <div class="code_content">
            <input type="text" placeholder="手机号注册/登录" class="tele" />
            <div class="code"><input type="text" placeholder="验证码" />获取验证码</div>

            <div class="login_btn">登录</div>
            <div class="register"><span>登录遇到问题?</span><span>立即注册</span></div>
            <p>
              未注册的手机验证后将自动登录。注册/登录即代表您同意并遵守<span
                >《米哈游通行证用户服务协议》《米哈游通行证用户个人信息及隐私保护政策》</span
              >
            </p>
          </div>
        </van-tab>
        <van-tab title="密码登录">
          <!-- 密码登录 -->
          <div class="password_content">
            <input type="text" placeholder="手机号注册/登录" class="tele" />
            <input type="password" placeholder="密码" class="code" />
            <div class="login_btn">登录</div>
            <div class="register"><span>登录遇到问题?</span><span>立即注册</span></div>
            <p>
              登录即代表您同意并遵守<span
                >《米哈游通行证用户服务协议》《米哈游通行证用户个人信息及隐私保护政策》</span
              >
            </p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.6);
  .login_box {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 360px;
    border-radius: 20px;
    background-color: #fff;
  }
  .logo {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130px;
    height: auto;
    img {
      width: 100%;
    }
  }
  .cancel {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 10px;
    height: 10px;
    img {
      width: 100%;
    }
  }
}

// 验证码登录
.code_content,
.password_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  .tele {
    padding: 10px 12px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    margin: 15px 0;
  }
  .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    line-height: 18px;
    border: 1px solid #ebebeb;
    border-radius: 8px;
    input {
      border: 0;
      padding-right: 15px;
      border-right: 1px solid #eee;
    }
  }
  .login_btn {
    line-height: 38px;
    margin: 15px 0;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background-color: #ff6d6d;
    border-radius: 20px;
  }
  .register {
    display: flex;
    justify-content: space-between;
    color: #7f858a;
    margin-bottom: 15px;
  }
  p {
    line-height: 18px;
    span {
      color: #7f858a;
      padding-left: 26px;
    }
  }
}

// 穿透
.login ::v-deep .van-tabs__line {
  width: 25px;
  background-color: #ff6d6d;
}
.login ::v-deep .van-tabs {
  margin-top: 20px;
}
.van-tabs ::v-deep .van-tabs__wrap {
  border-radius: 20px;
}
</style>
